<template>
  <view class="weather-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">加载中...</view>
    <!-- 请求失败提示 -->
    <view v-else-if="error" class="error">请求失败，请重试</view>
    <!-- 天气信息展示 -->
    <view v-else class="weather-info">
      <view class="title">明天天气预报</view>
      <view class="detail">日期：{{ tomorrow.date }}</view>
      <view class="detail">星期：{{ tomorrow.week }}</view>
      <view class="detail">最高温：{{ tomorrow.high }}°C</view>
      <view class="detail">最低温：{{ tomorrow.low }}°C</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,  // 加载状态
      error: false,   // 错误状态
      tomorrow: {}    // 明天天气数据
    };
  },
  onLoad() {
    this.getWeather(); // 页面加载时发起请求
  },
  methods: {
    getWeather() {
      uni.request({
        url: "https://t.weather.sojson.com/api/weather/city/101230501", // 天气预报接口
        method: "GET",
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            // 提取“明天”的预报数据（数组第1项为明天）
            const forecast = res.data.data.forecast[1];
            this.tomorrow = {
              date: forecast.date,
              week: forecast.week,
              high: forecast.high.replace("高温 ", ""), // 提取温度数值
              low: forecast.low.replace("低温 ", "")
            };
          } else {
            this.error = true;
          }
          this.loading = false;
        },
        fail: () => {
          this.error = true;
          this.loading = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.weather-page {
  padding: 30rpx;
}
.loading, .error {
  text-align: center;
  padding: 20rpx 0;
}
.weather-info {
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.detail {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
</style>



